<template>
	<view class="page">
		<u-navbar
			:placeholder="true"
			bgColor="#222"
			:titleStyle="{
				fontFamily: ' PingFangSC, PingFang SC',
				fontWeight: 500,
				color: textColor,
				textAlign: 'center',
				fontStyle: 'normal'
			}"
		>
			<!-- uview的bug tabbar页面不会自动隐藏左侧区域 -->
			<view class="u-nav-slot" slot="left"></view>
			<!-- uview没有接口可以修改title的颜色 -->
			<view class="u-nav-slot" slot="center">
				<text
					:style="{
						fontFamily: 'Alibaba PuHuiTi 2.0',
						fontWeight: 600,
						fontSize: '34rpx',
						color: '#eee',
						lineHeight: '34rpx',
						textAlign: 'center',
						fontStyle: 'normal'
					}"
				>
					{{ navbarText }}
				</text>
			</view>
		</u-navbar>
		<view class="page-main">
			<home v-if="activePage == 'home'"></home>
			<wenzhang v-if="activePage == 'wenzhang'"></wenzhang>
			<dati v-if="activePage == 'dati'"></dati>
			<my v-if="activePage == 'my'"></my>
		</view>
		<tabbar @change="changeTabbar"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import home from '@/components/tabbarPage/home.vue';
import wenzhang from '@/components/tabbarPage/wenzhang.vue';
import dati from '@/components/tabbarPage/dati.vue';
import my from '@/components/tabbarPage/my.vue';
export default {
	components: { home, wenzhang, dati, my, tabbar },
	onLoad() {
		console.log('首页打开了');
	},
	data() {
		return {
			navbarText: '首页',
			activePage: 'home'
		};
	},
	methods: {
		changeTabbar(e) {
			console.log(e);
			this.navbarText = e.name;
			this.activePage = e.icon;
		}
	}
};
</script>

<style lang="scss" scoped></style>
